<template>
  <h1>个人信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <button @click="hello">say</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  name: 'Demo',
  props: ['msg', 'type'],
  emits: ['hello'],
  setup(props, context) {
    console.log(props, context);
    // console.log(props.msg);
    // console.log(context.attrs); // 对应vue2中的$attrs
    // console.log(context.emit); // 触发自定义事件
    // console.log(context.slots); // 插槽


    // 数据
    let person = reactive({
      name: '张三',
      age: 18,
    })

    function hello() {
      context.emit('hello', 666)
    }
    
    // 返回一个对象（常用）
    return {
      person,
      hello
    }
  }
}
</script>

<style>
</style>
